<template>
    <div>
        <el-card>
            <el-form :model="queryForm" :inline='true'>
                <el-form-item label="用户名">
                    <el-input type="text" v-model="queryForm.username" size="small"></el-input>
                </el-form-item>
                <el-form-item label="昵 称">
                    <el-input type="text" v-model="queryForm.nickname" size="small"></el-input>
                </el-form-item>
                <el-form-item label="年 龄">
                    <el-input type="text" v-model="queryForm.age" size="small"></el-input>
                </el-form-item>
                <el-form-item label="手 机">
                    <el-input type="text" v-model="queryForm.mobile" size="small"></el-input>
                </el-form-item>
                <el-form-item label="权 限">
                    <el-select v-model="queryForm.role" size="small">
                        <el-option v-for="(item,index) in roleList" :key="'role-'+index" :value="item" :label="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性 别">
                    <el-select v-model="queryForm.sex" size="small">
                        <el-option v-for="(item,index) in sexList" :key="'sex-'+index" :value="item" :label="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="size" type="primary" @click="handleSearch">搜索</el-button>
                    <el-button size="size" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="mt12">
            <div class="handel-btns">
                <div class="left-btns">
                    <el-button size="small" icon="el-icon-plus" @click="handleAdd()">新增</el-button>
                    <el-button size="small" icon="el-icon-delete" @click="handleBatchDelete()">删除</el-button>
                </div>
                <div class="right-btns">
                    <el-button size="small" icon="el-icon-refresh" circle @click="getList"></el-button>
                </div>
            </div>
            <el-table :data="employeeList" style="wdith:100%" border class="mt12" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50px"></el-table-column>
                <el-table-column prop="id" label="ID" width="60px"></el-table-column>
                <el-table-column prop="username" label="用户名"></el-table-column>
                <el-table-column prop="nickname" label="昵 称"></el-table-column>
                <el-table-column prop="role" label="权 限"></el-table-column>
                <el-table-column prop="sex" label="性 别"></el-table-column>
                <el-table-column prop="age" label="年 龄"></el-table-column>
                <el-table-column prop="mobile" label="手 机"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间"></el-table-column>
                <el-table-column prop="note" label="操作记录"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-link icon="el-icon-edit" @click="handleEdit(scope.row.id)">编辑</el-link>
                        <el-link icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
            :current-page="queryForm.pageNo" 
            :page-size="queryForm.pageSize"
            :total="total"
            :page-sizes="[10,20,50,100]"
            layout="total,sizes,prev,pager,next"
            @current-change='handleCurrentChange'
            @size-change='handleSizeChange'>
            </el-pagination>
        </el-card>

        <el-dialog :title="title" :visible.sync="show" >
            <el-form :model="submitForm" :inline="true" label-width="120px" :rules='rules' ref="submitForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户名" prop="username">
                            <el-input type="text" v-model="submitForm.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="密 码" prop="password">
                            <el-input type="password" v-model="submitForm.password"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="昵 称" prop="nickname">
                            <el-input type="text" v-model="submitForm.nickname"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年 龄" prop="age">
                            <el-input type="text" v-model="submitForm.age"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="性 别" prop="sex">
                            <el-select v-model="submitForm.sex" size="small" placeholder="请选择">
                                <el-option v-for="(item,index) in sexList" :key="'sex-'+index" :value="item" :label="item"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                         <el-form-item label="权 限" prop="role">
                            <el-select v-model="submitForm.role" size="small" placeholder="请选择">
                                <el-option v-for="(item,index) in roleList" :key="'role-'+index" :value="item" :label="item"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="手 机" prop="mobile">
                            <el-input type="text" v-model="submitForm.mobile"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button type="primary" @click="handleSubmit">确定</el-button>
                <el-button @click="handleCancel">取消</el-button>
            </div>

        </el-dialog>

    </div>
</template>

<script>
    import{listEmployee,addEmployee,delEmployee,getEmployee,updateEmployee} from '@/api/Employee'
    export default {
        name:'Employee',
        data(){
            const checkPassword = (rule,value,callback)=>{
                if (this.password == null && (value.length > 16 || value.length < 6)){
                    return callback(new Error('长度必须在6-16之间'))
                }
                if (this.password != value && (value.length > 16 || value.length < 6)){
                    return callback(new Error('长度必须在6-16之间'))
                }
                callback()
            }
            const checkMobile = (rule,value,callback)=>{
                if(value == ""){
                    return callback()
                }
                let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
                if(!reg.test(value)){
                    return callback(new Error('请输入合法手机号'))
                }
                callback()
            }
            const checkAge = (rule,value,callback)=>{
                if(value < 0){
                    return callback(new Error('年龄不合法'))
                }
                callback()
            }
            return{
                submitForm:{},
                title:"新增",
                show:false,
                total:120,
                queryForm:{
                    pageNum:1,
                    pageSize:10,
                    orderByColumn:'id',
                    isAsc:'desc'
                },
                sexList:['男','女','保密'],
                roleList:['超级管理员','管理员','审核'],
                selectList:[],
                employeeList:[],
                rules:{
                    username:[
                        {required:true,message:'请输入用户名',trigger:'blur'},
                        {min:6,max:16,message:'长度必须在6-16之间',trigger:'blur'}
                    ],
                    password:[
                        {required:true,message:'请输入密码',trigger:'blur'},
                        {validator:checkPassword,trigger:'blur'}
                    ],
                    nickname:[
                        {min:1,max:16,message:'长度必须在1-16之间',trigger:'blur'}
                    ],
                    mobile:[
                        {validator:checkMobile,trigger:'blur'}
                    ],
                    age:[
                        {validator:checkAge,trigger:'blur'}
                    ]
                }
            }
        },
        created(){
            this.getList()
        },
        methods:{
            handleSubmit(){
                console.log(this.submitForm)
                this.$refs['submitForm'].validate((valid)=>{
                    console.log("valid---",valid)
                    if(valid){
                        if(this.submitForm.id){
                            updateEmployee(this.submitForm).then(res=>{
                                this.show = false
                                this.getList()
                                this.submitForm = {}
                            }).catch(err=>{
                                console.log(err)
                            })
                        }else{
                            addEmployee(this.submitForm).then(res=>{
                                this.show = false
                                this.getList()
                                this.submitForm = {}
                            }).catch(err=>{
                                console.log(err)
                            })
                        }
                    }
                })
            },
            handleReset(){
                this.queryForm = {
                    pageNum:1,
                    pageSize:10
                }
                this.getList()
            },
            handleSearch(){
                this.queryForm.pageNum = 1
                this.getList()
            },
            handleSizeChange(pageSize){
                this.queryForm.pageSize = pageSize
                this.queryForm.pageNum = 1
                this.getList()
            },
            handleCurrentChange(pageNum){
                this.queryForm.pageNum = pageNum
                this.getList()
            },
            getList(){
                listEmployee(this.queryForm).then(res=>{
                    this.employeeList = res.data.records
                    for(var i=0;i < this.employeeList.length;i++){
                        this.employeeList[i].updateTime = this.formatDate(this.employeeList[i].updateTime)
                    }
                    this.total = res.data.total
                }).catch(err=>{})
            },
            handleDelete(id){
                this.$confirm("你确定删除id为"+id+"的记录吗？","提示",{
                    cancelButtonText:"取消",
                    confirmButtonText:"确定",
                    type:"warning"
                }).then(()=>{
                    //调接口删除
                    delEmployee(id).then(res => {
                        //提示删除成功
                        this.$message("删除成功")
                        //刷新列表
                        this.getList()
                    }).catch(err=>{
                        console.log(err)
                    })
                }).catch(()=>{})
            },
            handleAdd(){
                this.show = true
                this.title = "新增"
                this.submitForm={}
            },
            handleCancel(){
                this.show = false
            },
            handleEdit(id){
                getEmployee(id).then(res=>{
                    //调接口获取最新数据
                    this.show = true
                    this.title = "编辑"
                    this.submitForm = res.data
                }).catch(err=>{
                    console.log(err)
                })
            },
            handleBatchDelete(){
                console.log(this.selectList)
                if(this.selectList){
                    let ids = this.selectList.map(o => {return o.id})
                    console.log('ids---------->',ids)
                    this.handleDelete(ids)
                }
            },
            handleSelectionChange(val){//当我们选择时会回调这个函数
                this.selectList = val;
                console.log(val)
            },
            formatDate(value) {
                const date = new Date(value);
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                const hours = date.getHours();
                const minutes = date.getMinutes();
                const seconds = date.getSeconds();
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            }
        }
    }
</script>

<style  scoped>
    .el-form-item{
        margin: 10px 30px;
    }
    .handel-btns{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .el-link{
        margin: 0 5px;
        font-size: 12px;
    }
</style>